<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>页面生命周期：DOMContentLoaded，load，beforeunload，unload</title>
	</head>
	<body>
		<!-- 当 DOM 准备就绪时，document 上的 DOMContentLoaded 事件就会被触发。在这个阶段，我们可以将 JavaScript 应用于元素。 -->

		<script>
			// 页面生命周期：

			// 【作用：DOM已经就绪，可以查找DOM节点，并初始化接口。】
			// 1. DOMContentLoaded 事件发生在 document 对象身上。浏览器已完全加载HTML，并构建了 DOM 树，但像 <img> 和样式表的外部资源可能尚未加载完成。
			document.addEventListener('DOMContentLoaded', function (e) {
				console.log('DOMContentLoaded ==>' + 'HTML已加载完成，DOM 已构建。但外部资源可能尚未加载完成，img 等...')
			})

			// 【作用：外部资源已加载完毕，样式也已被应用，图片大小也知道了。】
			// 2. load 浏览器不仅加载完成了HTML，还加载了所有外部资源：图片、样式等。
			window.addEventListener('load', function (e) {
				console.log('load ==>' + 'HTML已加载完成，DOM 已构建。外部资源已加载完成，img 等...')
			})

			// 【作用：用户正在离开页面，我们可以检查用户是否保存了更改，并询问他们是否真的要离开。】
			// 3. beforeunload/unload 用户正在离开页面。
			window.addEventListener('beforeunload', function (e) {
				console.log('beforeunload ==>' + '用户正在离开页面')
			})

			// 【作用：用户已经离开了页面，但我们任然可以做一些操作，例如发送统计数据。】
			window.addEventListener('unload', function (e) {
				console.log('unload ==>' + '用户已离开页面')

				// *** 使用 navigator.sendBeacon 来发送小数据包（如日志、分析数据等）到服务器的方法，而不阻塞当前页面的卸载或导航。***
			})
		</script>

		<script>
			console.log('会在 DOMContentLoaded 之前执行')
		</script>
	</body>
</html>
